<template lang="pug">
.page-maps.app-container
  #maps-main
</template>

<script setup>
import { initMap, destroyMap } from './map'

import { reactive, getCurrentInstance, onUnmounted } from 'vue'

const { proxy } = getCurrentInstance() // 内部组件实例

proxy.$nextTick(() => {
  initMap('maps-main')
})

onUnmounted(() => {
  destroyMap()
})
</script>

<style lang="scss">
  .page-maps {
    position: fixed;
    #maps-main {
      width: 600px;
      height: 400px;

      .amap-ui-smp-ifwn-content-body {
        max-width: 300px;
        .amap-ui-infowindow-title {
          line-height: 30px;
          font-size: 16px;
        }
      }
      .amap-info {
        margin-top: -2rem;
      }
      .amap-icon {
        img {
          width: 25px;
        }
      }
      .custom-input-card {
        width: 18rem;
      }
      .custom-input-card .btn:last-child {
        margin-left: 1rem;
      }
      .content-window-card {
        position: relative;
        width: 23rem;
        padding: 0;
        box-shadow: none;
        bottom: 0;
        left: 0;
      }
      .content-window-card p {
        line-height: 1rem;
      }
    }
  }
</style>
